<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="200px">
      <el-form-item label="项目名称">
      	<div>
      		<el-input v-model="form.fileTitle"></el-input>
      	</div>
    	</el-row>
     </el-form-item>
      <el-form-item label="文件种类">
        <el-radio-group v-model="form.fileClassType">
          <el-radio label="通知" value="通知"/>
          <el-radio label="方案" value="方案"/>
          <el-radio label="细则" value="细则"/>
          <el-radio label="报表" value="报表"/>
          <el-radio label="自定义" value="自定义"/>
        </el-radio-group>
        <el-input v-model="form.fileClassTypeValue"  placeholder="请选择自定义的文件种类" style="margin-left:30px;width:200px;"/>
      </el-form-item>
      <el-form-item label="推送范围">
        <el-radio-group v-model="form.pushScope">
          <el-radio label="所有人" value="所有人"/>
          <el-radio label="管理层" value="管理层"/>
        </el-radio-group>
        <el-select v-model="form.pushScopeValue" placeholder="请选择指定的推送范围" style="margin-left:30px;width:200px;">
        	<el-option 
        	 v-for="(v,k) in levs" 
        	 :label="v.label" 
        	 :value="v.value"	
        	 :key="v.key">
        	</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上传方式">
        <el-radio-group v-model="form.uploadMode" @input="onChangeUploadMode">
          <el-radio label="本地文件" value="本地文件"/>
          <el-radio label="在线扫描" value="在线扫描"/>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="onRefresh">刷新</el-button>
      </el-form-item>
    </el-form>
<el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="序号" width="65">
        <template slot-scope="scope">
          {{ scope.$index+1 }}
        </template>
      </el-table-column>
      <el-table-column label="文件名称" align="center">>
        <template slot-scope="scope">
          {{ scope.row.filename }}
        </template>
      </el-table-column>
      <el-table-column label="文件类型" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.filetype }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="文件大小" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.filesize }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="发布日期" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.created_at }}</span>
        </template>
      </el-table-column>
    </el-table>
<el-dialog
  title="提示"
  :visible.sync="onlineScanDialogShow"
  width="30%"
  :show-close="false">
  <span>在线扫描</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="handleOnlineScanDialogClose">取 消</el-button>
    <el-button type="primary" @click="handleOnlineScanDialogClose">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        notstart: 'success',
        playing: 'gray',
        end: 'danger'
      }
      return statusMap[status]
    },
    statusNameFilter(status) {
      const statusMap = {
        notstart: '未开始',
        playing: '进行中',
        end: '已结束'
      }
      return statusMap[status]
    },
  },
  data() {
    return {
    	onlineScanDialogShow:false,
      levs:[
        {value:"学校",label:"学校",key:"学校"},
        {value:"县市",label:"县市",key:"县市"},
        {value:"地区",label:"地区",key:"地区"},
        {value:"省内",label:"省内",key:"省内"},
      ],
      form: {
      	fileTitle:'',
        fileClassType: '',
        fileClassTypeValue:'',
        pushScope: '',
        pushScopeValue:'',
        uploadMode: '',
        fileInfo:{}
      },
      listLoading: false,
      list:[
      {filename:"这是一份测试文档1",filetype:"Word",filesize:"100MB",created_at:"2024-10-30 12:00:00"},
      {filename:"这是一份测试文档2",filetype:"Excel",filesize:"300MB",created_at:"2024-10-30 12:00:00"},
      {filename:"这是一份测试文档3",filetype:"EXE",filesize:"200MB",created_at:"2024-10-30 12:00:00"},
      {filename:"这是一份测试文档4",filetype:"TXT",filesize:"500MB",created_at:"2024-10-30 12:00:00"},
      {filename:"这是一份测试文档5",filetype:"JPG",filesize:"200MB",created_at:"2024-10-30 12:00:00"},
      {filename:"这是一份测试文档6",filetype:"PNG",filesize:"800MB",created_at:"2024-10-30 12:00:00"},
      {filename:"这是一份测试文档7",filetype:"PPT",filesize:"400MB",created_at:"2024-10-30 12:00:00"},
      {filename:"这是一份测试文档8",filetype:"MP3",filesize:"200MB",created_at:"2024-10-30 12:00:00"},
      {filename:"这是一份测试文档9",filetype:"MP4",filesize:"430MB",created_at:"2024-10-30 12:00:00"},
      {filename:"这是一份测试文档10",filetype:"ZIP",filesize:"30MB",created_at:"2024-10-30 12:00:00"},
      ]
    }
  },
  methods: {
    onSubmit() {
      this.$message('submit!')
    },
    onRefresh() {
      this.$message({
        message: 'refresh!',
        type: 'warning'
      })
    },
    onChangeUploadMode(v){
    	console.log("onChangeUploadMode=",v)
    	if(v=="在线扫描")
    	this.onlineScanDialogShow=true;
    },
    handleOnlineScanDialogClose(){
    	console.log("handleOnlineScanDialogClose")
    	this.form.uploadMode='';
    	this.onlineScanDialogShow=false;
//  	this.$nextTick(()=>{
//  	 this.$forceUpdate();
//  	})
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>

